<script setup lang="ts">
import { inject, ref, type Ref } from 'vue';

// 孩子的孩子组件
// 2.inject 函数类似鸿蒙的 @Consume 装饰器 后代组件接收祖先的数据
// ref(0):默认值 防止有 undefined 的情况
// Ref<number>:是 ref()函数返回的类型：Ref<number,number> ,只需写Ref<number>即可，所以默认值应该写成ref(0)
const totalCount = inject<Ref<number>>('totalCount',ref(0))
  //祖先传过来回调函数
const  updateTotalCount = inject('updateTotalCount',(num:number)=>{})
</script>

<template>
  <div class="sonson">
<h3>后代{{ totalCount }}</h3>
<button @click="totalCount++">后代修改</button>
<!-- 祖先传过来回调函数 -->
<button @click="updateTotalCount(10)">调用回调函数+10</button>
  </div>
</template>

<style scoped>

</style>